<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页面</title>
    <script src="../js/vue.js"></script>
    <!--    引入vue中路由插件-->
    <script src="../js/vue-router.js"></script>
</head>
<body>

<!--
        /login   =>     login     组件到app容器中
        /register   =>  register  组件到app容器中

       以上的情形   根据路径加载不同的组件 可以使用vue中的路由来实现   VueRouter

-->
<div id="app">

    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>

</div>


<script>

   // 非单文件组件的开发
    // 登录组件
    const login = {
        template: `
            <div>
                <h1>欢迎登录</h1>
                <form action="">
                        <p><input type="text" placeholder="请输入用户名"></p>
                        <p><input type="text" placeholder="请输入密码"></p>
                        <p><input type="submit" value="立即登录"></p>
                </form>
            <div>
        `
    }

    // 注册组件
    const register = {
        template: `
            <div>
                <h1>欢迎注册</h1>
                 <form action="">
                        <p><input type="text" placeholder="请输入用户名"></p>
                        <p><input type="text" placeholder="请输入密码"></p>
                        <p><input type="submit" value="立即注册"></p>
                </form>
            <div>
        `
    }

    // 1. 定义路由列表
    const routes = [
        {
            path: "/",
            redirect:'/login'    // 路径的重定向
        },

        {
            path: "/login",   // 页面的访问路径
            component:login    // 路径对应的组件
        },
        {
            path: "/register",
            component:register
        }
    ]

    // 2.创建一个路由对象
    const myrouter =  new VueRouter({
        routes
    })


    const vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        // components: {   //局部注册
        //     login, register
        // }
        router    //  3.注册路由 到  vm
    })


</script>


</body>
</html>
